<template>
  <div>
    <!-- 选择未指派菜单司机 2018/3/7 11:44 zhangQ -->
    <Form ref="dispatchForm" :model="dispatchForm" :rules="roleDispatchForm" :label-width="80">
      <FormItem label="选择司机" prop="driverIds">
        <!--<autoSelect v-model="dispatchForm.driverIds" field="id" label="login_name" search-keys="login_namePy,login_name" :dataList="driverList" :dropAll="true" :multiple="true"></autoSelect>-->
        <!--<Select v-model="dispatchForm.driverIds" multiple >-->
        <!--<template v-for="item in driverList">-->
        <!--<Option :value="item.id" :key="item.id">{{ item.login_name }}</Option>-->
        <!--</template>-->
        <!--</Select>-->
        <Row>
          <i-col :span="8">
            <CheckboxGroup v-model="filterVal">
              <template v-for="item in truckTypeList">
                <Checkbox :label="item.id" :true-value="item.id">{{ item.name }}</Checkbox>
                <br>
              </template>
            </CheckboxGroup>
          </i-col>
          <i-col :span="16">
            <Transfer
              ref="transfer"
              :data="driverListTransfer"
              :target-keys="dispatchForm.driverIds"
              :render-format="renderFormat"
              :list-style="{width:'200px',height: '350px'}"
              filterable
              @on-change="checkDriverHandleChange"
              :filter-method="driverListFilter">
              <div :style="{float: 'right', margin: '5px'}">
                <Button type="ghost" size="small" @click="resetData">重置</Button>
              </div>
            </Transfer>
          </i-col>
        </Row>


      </FormItem>
      <FormItem label="掏箱" prop="outAddress" v-if="isEdit">
        <checkbox v-model="dispatchForm.checkTackOut"></checkbox>
      </FormItem>
      <FormItem label="选择企业">
        <Select v-model="dispatchForm.userAddressId"   filterable @on-change="changeAddress">
          <!--<template >-->
            <Option v-for="item in userAddressList" :value="item.id" :key="item.id">{{item.companyName}}({{item.stationName}})</Option>
          <!--</template>-->
        </Select>
      </FormItem>
      <FormItem label="收货地址" prop="outAddress" v-if="isEdit">
        <!--<autoSelect v-model="dispatchForm.outAddress" field="key" label="key" search-keys="key,keyPy" :dataList="addressList" :dropAll="true" style="width: 200px;" ></autoSelect>-->
        <Input v-model="dispatchForm.outAddress" style="width: 200px;"></Input>
      </FormItem>
      <FormItem label="联系人" prop="outContacts" v-if="isEdit">
        <Input v-model="dispatchForm.outContacts" style="width: 200px;"></Input>
      </FormItem>
      <FormItem label="电话" prop="outMobile" v-if="isEdit">
        <Input v-model="dispatchForm.outMobile" style="width: 200px;"></Input>
      </FormItem>
      <FormItem label="备注" prop="memo" v-if="isEdit">
        <Input v-model="dispatchForm.memo" type="textarea" :autosize="{minRows: 2, maxRows: 10}" style="width: 200px;"></Input>
      </FormItem>
      <div class="xlinkModal-footer">
        <Button type="primary" @click="onOk">确认</Button>
      </div>
    </Form>

  </div>
</template>

<script>
  import _ from 'lodash'
  import {getTruckTypeList} from '@api/backEnd/fleetControl'
  import {getUserAddressMoreInfo} from '@/api/backEnd/userAddress'

  export default {
    name: 'check-driver-modal',
    data () {
      let dispatchForm = {
        driverIds: [],
        outAddress: '',
        outMobile: '',
        outContacts: '',
        memo: '',
        userAddressId: '',
        checkTackOut: false
      }
      let roleDispatchForm = {}
      let filterVal = []
      let truckTypeList = []
      let driverListTransfer = []
      let isEdit = true
      let userAddressList = []
      let datas = {dispatchForm, isEdit, roleDispatchForm, driverListTransfer, truckTypeList, filterVal, userAddressList}
      return datas
    },
    props: {
      dispatchDriverInfo: {
        type: Object,
        default () {
          return {}
        }
      },
      form: {
        type: Object,
        default () {
          return {}
        }
      },
      driverList: {
        type: Array,
        default () {
          return []
        }
      },
      addressList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    watch: {
      filterVal (val) {
        let transfer = this.$refs.transfer
        console.log('resFilterDataresFilterData', transfer.$refs.left)
        console.log('resFilterDataresFilterData', transfer.$refs.right)
        transfer.$refs.left['showFooter'] = true
        // this.$set(transfer.$refs.left, 'showFooter', true)
      }
    },
    computed: {},
    methods: {
      getTruckType () {
        getTruckTypeList().then(res => {
          this.truckTypeList = res.data.data
        })
      },
      renderFormat (item) {
        return item.label + ' - ' + item.description
      },
      resetData () {
        if (!this.form.driverIds) {
          this.form.driverIds = '[]'
        }
        this.dispatchForm.driverIds = JSON.parse(this.form.driverIds)
      },
      checkDriverHandleChange (newTargetKeys, direction, moveKeys) {
        this.dispatchForm.driverIds = newTargetKeys
      },
      driverListFilter (data, txt) {
        let upTxt = txt.toUpperCase()
        let lowTxt = txt.toLowerCase()
        let rightData = this.$refs.transfer.rightData
        if (rightData) {
          if (_.find(rightData, {'key': String(data.key)})) {
            return true
          }
        }
        if (this.filterVal && this.filterVal.length > 0) {
          let isType = _.some(this.filterVal, function (o) {
            return String(o) === String(data.row.type)
          })
          if (!isType) {
            return false
          }
        }
        return (_.includes(data.row['login_name'], upTxt) || _.includes(data.row['login_name'], lowTxt)) || (_.includes(data.row['truck_no'], upTxt) || _.includes(data.row['truck_no'], lowTxt)) || (_.includes(data.row['login_namePy'], upTxt) || _.includes(data.row['login_namePy'], lowTxt))
      },
      onOk () {
        // 判断车辆是否绑定
        // this.dispatchForm.driverIds
        let resultMsg = ''
        let resObj = null
        this.dispatchForm.driverIds.forEach((item) => {
          resObj = _.find(this.driverList, {id: item})
          // console.log(resObj)
          if (resObj.truck_no == null) {
            resultMsg += resObj.login_name + ','
          }
        })
        // if (this.dispatchForm.checkTackOut) {
        //   for (let i = 0; i < this.dispatchForm.length; i++) {
        //     // console.log(this.dispatchForm[i])
        //     this.dispatchForm[i].takeOutContainerState = 1
        //   }
        // } else {
        //   for (let i = 0; i < this.dispatchForm.length; i++) {
        //     // console.log(this.dispatchForm[i])
        //     this.dispatchForm[i].takeOutContainerState = 0
        //   }
        // }
        // console.log(this.dispatchForm)
        if (resultMsg !== '') {
          resultMsg = resultMsg.substr(0, resultMsg.length - 1)
          this.$Modal.error({
            title: '提示信息',
            content: '请勿选择未绑定车辆的司机进行派单：' + resultMsg
          })
          return
        }
        if (!(this.dispatchForm.driverIds.length > 0)) {
          this.$Message.error('司机必选')
          return
        }
        if (!this.dispatchForm.outAddress) {
          this.$Message.error('地址不能为空')
          return
        }
        this.$refs['dispatchForm'].validate((valid) => {
          if (valid) {
            this.$emit('dispatch', this.dispatchForm)
          } else {
          }
        })
      },
      queryAddressData () {
        getUserAddressMoreInfo({
          pageIndex: 1,
          pageSize: 1000
        }).then(res => {
          if (res.data.isSuccess === 1) {
            console.log('地址加载成功!')
            console.log(res.data.data)
            this.$data.userAddressList = res.data.data
            console.log('企业不显示失败可能原因:', this.dispatchDriverInfo.userAddressId)
            this.dispatchDriverInfo.userAddressId && (this.dispatchForm.userAddressId = this.dispatchDriverInfo.userAddressId)
          } else {
            console.log('地址加载失败!')
          }
        })
      },
      changeAddress (val) {
        console.log('change')
        let currentAddressParam = _.find(this.userAddressList, {id: val})
        this.dispatchForm.userAddressId = currentAddressParam.id
        this.dispatchForm.outAddress = currentAddressParam.address
        this.dispatchForm.outContacts = currentAddressParam.linkman
        this.dispatchForm.outMobile = currentAddressParam.phone
      },
      loadData () {
        console.log('未指定派单时传递的数据', this.dispatchDriverInfo)
        this.dispatchDriverInfo.outAddress && (this.dispatchForm.outAddress = this.dispatchDriverInfo.outAddress)
        this.dispatchDriverInfo.outContacts && (this.dispatchForm.outContacts = this.dispatchDriverInfo.outContacts)
        this.dispatchDriverInfo.outMobile && (this.dispatchForm.outMobile = this.dispatchDriverInfo.outMobile)
        this.dispatchDriverInfo.memo && (this.dispatchForm.memo = this.dispatchDriverInfo.memo)
        // this.dispatchDriverInfo.userAddressId && (this.dispatchForm.userAddressId = this.dispatchDriverInfo.userAddressId)
      }
    },
    created () {
      this.getTruckType()
      this.queryAddressData()
    },
    mounted () {
      let driverListTransfer = []
      this.driverList.forEach((item) => {
        driverListTransfer.push({
          key: item.id,
          label: item.login_name,
          description: item.truck_no,
          row: item
        })
      })
      this.driverListTransfer = driverListTransfer
      // setTimeout(() => {
      //   if (this.form.outAddress) {
      //     console.log('from', this.form)
      //     this.isEdit = false
      //     this.dispatchForm.driverIds = JSON.parse(this.form.driverIds)
      //     this.dispatchForm.outAddress = this.form.outAddress
      //     this.dispatchForm.outContacts = this.form.outContacts
      //     this.dispatchForm.outMobile = this.form.outMobile
      //     this.dispatchForm.memo = this.form.memo
      //     this.dispatchForm.userAddressId = this.form.userAddressId
      //   }
      // }, 200)

      // this.dispatchDriverInfo.outAddress && (this.dispatchForm.outAddress = this.dispatchDriverInfo.outAddress)
      // this.dispatchDriverInfo.outContacts && (this.dispatchForm.outContacts = this.dispatchDriverInfo.outContacts)
      // this.dispatchDriverInfo.outMobile && (this.dispatchForm.outMobile = this.dispatchDriverInfo.outMobile)
      // this.dispatchDriverInfo.memo && (this.dispatchForm.memo = this.dispatchDriverInfo.memo)
      // this.dispatchDriverInfo.userAddressId && (this.dispatchForm.userAddressId = this.dispatchDriverInfo.userAddressId)
      // console.log('dispatchForm', this.dispatchForm)
      this.loadData()
    },
    components: {}
  }
</script>

<style scoped>

</style>
